<template>
	<view class="indent-card">
		<view class="canteen">
			<image src="@/static/logo.png"></image>
			<view class="org_name">
				益而益集团餐厅 - {{indent.region}}
			</view>
			<view class="status">
				<van-tag color="#004EA2" type="primary">{{mapIndentStatus[indent.status]}}</van-tag>
			</view>
		</view>
		<view class="content" @click="goDetail">
			<p class="order_form_queue">取餐号: {{indent.order_form_queue}}</p>
			<view class="indent_imgs">
				<view class="img_wrap" v-if="goodsList.length">
					<image 
						v-for="(it, i) in goodsList" 
						:key="it._id" 
						:src="it.goods_thumb" 
						lazy-load 
						:class="[i === 2 ? 'more' : '']"
						mode="aspectFill"></image>
				</view>
				<view v-else class="loaging">
					<uni-load-more status="loading"></uni-load-more>
				</view>
				<view class="price">¥{{indent.total_fee}}</view>
			</view>
			<p class="create_time">
				<span style="margin-right: 6rpx;">下单时间:</span>
				<uni-dateformat :date="indent.create_time" :threshold="[0,0]" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</p>
		</view>
		<view class="bottom">
			<p class="one_more_order" v-if="[0,1,2].includes(indent.status)" @click="cancelIndent">取消订单</p>
			<template v-if="indent.status === 0">
				<p class="one_more_order" @click="continueOrder">继续点餐</p>
				<p class="one_more_order" @click="submitIndent">提交订单</p>
			</template>
			<p class="one_more_order" v-else @click="oneMoreRrder">再来一单</p>
			<p @click="callPhone">联系商家</p>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	const indentDB = db.collection('dish-order-form')
	const goodListDB = db.collection('dish-list')

	export default {
		name: 'indent-card',
		props: ['indent'],
		data() {
			return {
				goodsList: []
			}
		},
		computed: {
			mapIndentStatus() {
				return this.$store.state.order.mapIndentStatus
			}
		},
		async mounted() {
			await this.requestGoods()
		},
		methods: {
			callPhone() {
				const publicInfo = this.$store.state.user.publicInfo
				const map = {
					'苏州': 'phone_suzhou',
					'温州': 'phone_wenzhou'
				}
				wx.makePhoneCall({
				  phoneNumber: publicInfo[map[this.indent.region]]
				})
			},
			async requestGoods() {
				const {indent} = this
				const goods_list = indent.order_form_num['dish-order-form-goods'].slice(0, 3)
				const goods_id_list = goods_list.map(e => e.goods_id)
				const goods = await goodListDB.where({'_id': db.command.in(goods_id_list)}).get().then(r => r.result.data)
				this.goodsList = goods_id_list.map(e => goods.find(v => e === v._id))
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/indent-detail/indent-detail?id=' + this.indent._id,
				})
			},
			async oneMoreRrder() {
				const flag = await this.$store.dispatch('veriftUserInfo')
				if (!flag) return
				await uni.switchTab({url: '/pages/order/order'})
				uni.$emit('oneMoreRrder', this.indent)
			},
			async submitIndent() {
				this.$store.dispatch('submitShareIndent', this.indent._id)
			},
			async continueOrder() {
				const flag = await this.$store.dispatch('veriftUserInfo')
				if (!flag) return
				uni.switchTab({
					url: '/pages/order/order'
				})
				uni.$emit('continueOrder', this.indent)
			},
			async cancelIndent() {
				console.log(this.indent._id);
				uni.showModal({
					title: '提示',
					content: '你确定取消订单吗',
					success: async () => {
						await indentDB.doc(this.indent._id).update({
							status: -1
						})
						uni.showToast({
							title: '取消成功',
							icon: 'success'
						})
						uni.$emit('refreshIndentList')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.indent-card {
		width: 100%;
		// height: 287rpx;
		border-radius: 15rpx;
		background-color: #fff;
		padding: 0 20rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		.canteen {
			height: 80rpx;
			border-bottom: 1px solid #f4f4f4;
			display: flex;
			align-items: center;

			>image {
				width: 144rpx;
				height: 20rpx;
			}

			.org_name {
				font-size: 28rpx;
				margin-left: 20rpx;
				font-weight: bold;
				// color: $uni-theme-color;
				color: black;
			}

			.status {
				margin-left: auto;
				margin-bottom: 8rpx;
			}
		}

		.content {
			// height: 90rpx;
			padding: 20rpx 0;

			.order_form_queue, .create_time {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
			}
			.indent_imgs {
				margin: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.img_wrap {
					display: flex;
					align-items: center;
					.more::before {
						content: "查看更多";
						font-size: 24rpx;
						color: #ffffff;
						text-align: center;
						line-height: 120rpx;
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						z-index: 9;
						background: rgba(0, 0, 0, .4);
					}
					image {
						position: relative;
						width: 120rpx;
						height: 120rpx;
						background: #f7f8fa;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 8rpx;
						overflow: hidden;
						margin-right: 20rpx;
					}
				}
				.loaging {
					flex: 1;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.price {
					font-weight: bold;
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-end;
			border-top: 1px solid #f4f4f4;
			padding-top: 20rpx;
			font-weight: bold;
			.one_more_order {
				border: 1px solid #e0e0e0;
				color: black !important;
				background-color: #ffffff !important;
				margin-right: 20rpx;
			}
			p {
				width: 150rpx;
				height: 52rpx;
				background-color: $uni-theme-color;
				border-radius: 10rpx;
				color: white;
				font-size: 24rpx;
				text-align: center;
				line-height: 52rpx;
			}
		}
	}
</style>